<template>
	<view>
		<u-navbar :isFixed="true" title="常见问题" :borderBottom="false"></u-navbar>
		<view class="search ">
			<u-search placeholder="搜索问题" :clearabled="true" :show-action="false" v-model="keyword" @search="select" @custom="select"></u-search>
		</view>
		<view class="wrap">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top flex_bet_align" v-show="index!=cur" @click="show(index)">
					<view class="title">{{item.title}}</view>
					<view class="icon">+</view>
				</view>
				<view class="top flex_bet_align" v-show="index==cur" @click="hide(index)">
					<view class="title">{{item.title}}</view>
					<view class="icon" v-show="index==cur" >-</view>
				</view>
				<uParse style="margin-top: 30rpx;" :content="item.content" v-show="cur==index"></uParse>
			</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				cur:0,
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				keyword:""
			}
		},
		onLoad(options) {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			show(e){
				this.cur = e
			},
			hide(e){
				this.cur = null
			},
			select(){
				console.log(_this.keyword)
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('getcommonproblem', {
					pagesize:20,
					search:_this.keyword
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:#FFFFFF;
		padding:0 33rpx;
	}
	.search {
		margin-top:10rpx;
		padding:0 30rpx;
	}
	.wrap{
		margin-top:50rpx;
		padding:0 30rpx;
		.item{
			border-bottom:1rpx solid #EEEEEE;
			padding:32rpx 0;
			.top{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: left;
				color: #333333;
				line-height: 50rpx;
				.icon{
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					// background-color: #007AFF;
					color:#999999;
					font-weight: 700;
				}
			}
			.content{
				width: 683rpx;
				background: #e6e6e6;
				border-radius: 10rpx;
				margin-top:37rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: left;
				color: #999999;
				line-height: 38rpx;
				letter-spacing: 0px;
				padding:26rpx 45rpx 42rpx 28rpx;
			}
		}
	}
</style>
